<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>
  
  <script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";

const animationDuration = 6000;

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart"
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "300px"
    }
  },
  data() {
    return {
      chart: null
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");

      this.chart.setOption({
        // backgroundColor: "#031245",
        color: [
          "#63caff",
          "#49beff",
          "#03387a",
          "#03387a",
          "#03387a",
          "#6c93ee",
          "#a9abff",
          "#f7a23f",
          "#27bae7",
          "#ff6d9d",
          "#cb79ff",
          "#f95b5a",
          "#ccaf27",
          "#38b99c",
          "#93d0ff",
          "#bd74e0",
          "#fd77da",
          "#dea700"
        ],
        grid: {
          containLabel: true,
          left: 20,
          right: 20,
          bottom: 10,
          top: 40
        },
        xAxis: {
          axisLabel: {
            color: "#c0c3cd",
            fontSize: 12,
            interval: 0
          },
          axisTick: {
            lineStyle: {
              color: "#384267"
            },
            show: true
          },
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: "#384267",
              width: 1,
              type: "dashed"
            },
            show: true
          },
          data: ["无证经营", "假牌套牌", "未密闭运输", "超载超限", "沿途遣撒"],
          type: "category"
        },
        yAxis: {
          axisLabel: {
            color: "#c0c3cd",
            fontSize: 12
          },
          axisTick: {
            lineStyle: {
              color: "#384267",
              width: 1
            },
            show: true
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#384267",
              type: "dashed"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#384267",
              width: 1,
              type: "dashed"
            },
            show: true
          },
          name: ""
        },
        series: [
          {
            data: [58212, 78254, 41032, 12755, 20145],
            type: "bar",
            barMaxWidth: "auto",
            barWidth: 25,
            itemStyle: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                type: "linear",
                global: false,
                colorStops: [
                  {
                    offset: 0,
                    color: "#0b9eff"
                  },
                  {
                    offset: 1,
                    color: "#63caff"
                  }
                ]
              }
            },
            label: {
              show: true,
              position: "top",
              distance: 10,
              color: "#fff"
            }
          },
          {
            data: [1, 1, 1, 1, 1, 1, 1, 1],
            type: "pictorialBar",
            barMaxWidth: "25",
            symbol: "diamond",
            symbolOffset: [0, "50%"],
            symbolSize: [25, 15]
          },
          {
            data: [58212, 78254, 41032, 12755, 20145],
            type: "pictorialBar",
            barMaxWidth: "25",
            symbolPosition: "end",
            symbol: "diamond",
            symbolOffset: [0, "-50%"],
            symbolSize: [25, 12],
            zlevel: 2
          },
          {
            data: [100000, 100000, 100000, 100000, 100000],
            type: "bar",
            barMaxWidth: "auto",
            barWidth: 25,
            barGap: "-100%",
            zlevel: -1
          },
          {
            data: [1, 1, 1, 1, 1, 1, 1, 1],
            type: "pictorialBar",
            barMaxWidth: "25",
            symbol: "diamond",
            symbolOffset: [0, "50%"],
            symbolSize: [25, 15],
            zlevel: -2
          },
          {
            data: [100000, 100000, 100000, 100000, 100000],
            type: "pictorialBar",
            barMaxWidth: "25",
            symbolPosition: "end",
            symbol: "diamond",
            symbolOffset: [0, "-50%"],
            symbolSize: [25, 12],
            zlevel: -1
          }
        ],
        tooltip: {
          trigger: "axis",
          show: false
        }
      });
    }
  }
};
</script>
  